<route type="page" lang="json">
{
  "style": {
    "navigationBarTitleText": "专业分析",
    "navigationStyle": "custom"
  }
}
</route>
<template>
  <view class="professional-analysis">
    <view class="fixed-bg"></view>
    <view class="professional-analysis__header">
      <c-title :title="detailInfo.name" :subtitle="subtitle"></c-title>

      <view class="size-box"></view>
      <image
        class="img"
        src="@/pages-sub/static/professionalAnalysis/professional-analysis.png"
        mode="scaleToFill"
      />
    </view>
    <view class="professional-analysis__main">
      <view class="professional-analysis__main--content">
        <view class="type">
          <view class="type--title">
            <image src="@/pages-sub/static/professionalAnalysis/zyjs.png" mode="scaleToFill" />
            <text>专业介绍</text>
          </view>
          <view class="type--content opacity-50">
            <c-parse :content="detailInfo.professionalIntroduction"></c-parse>
            <!-- <view
              >作为国内寿险行业的龙头企业，需要历史学类专业的毕业生从事教育培训类、人力资源与综合行政类等岗位工作。这些岗位可能涉及到企业文化建设、员工培训中的历史文化教育、企业历史资料整理与研究等方面的工作。</view
            > -->
          </view>
        </view>
        <view class="type">
          <view class="type--title">
            <image src="@/pages-sub/static/professionalAnalysis/jyfx.png" mode="scaleToFill" />
            <text>就业方向</text>
          </view>
          <view class="type--content opacity-50">
            <c-parse :content="detailInfo.employmentDirection"></c-parse>
            <!-- <view
              >作为国内寿险行业的龙头企业，需要历史学类专业的毕业生从事教育培训类、人力资源与综合行政类等岗位工作。这些岗位可能涉及到企业文化建设、员工培训中的历史文化教育、企业历史资料整理与研究等方面的工作。</view
            > -->
          </view>
        </view>
        <view class="type">
          <view class="type--title">
            <image src="@/pages-sub/static/professionalAnalysis/ratio.png" mode="scaleToFill" />
            <text>就业占比</text>
          </view>
          <view class="type--content">
            <view class="mb-4" v-for="item in employmentRatio" :key="item.id">
              <view class="flex justify-between">
                <text>{{ item.obtainName }}：</text>
                <text class="text-[#FF800E]">{{ item.obtainNum }}%</text>
              </view>
              <wd-progress
                :percentage="Number(item.obtainNum)"
                hide-text
                color="#FF800E"
              ></wd-progress>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ApiGetMajorDetail, ApiGetMajorEmploymentRatio } from '@/service/major';

  import { ref } from 'vue';

  const detailInfo = ref<{
    name?: string;
    id?: number;
    professionalIntroduction?: string;
    employmentDirection?: string;
  }>({});
  const subtitle = ref('');
  const employmentRatio = ref<
    {
      obtainName: string;
      obtainNum: string;
      id: number;
    }[]
  >([]);

  onLoad(async ({ params }) => {
    if (params) {
      params = JSON.parse(params);
      subtitle.value = params.subtitle;
      const { data } = await ApiGetMajorDetail({ id: params.id });
      detailInfo.value = data;
      ApiGetMajorEmploymentRatio({ majorId: params.id }).then(({ data }) => {
        employmentRatio.value = data as any;
      });
    }
  });
</script>

<style lang="scss" scoped>
  .professional-analysis {
    height: calc(100% - 100rpx);
    padding: 32rpx 32rpx 68rpx;

    .fixed-bg {
      background: linear-gradient(180deg, #ffdbc6 0%, #fbe1d1 27%, #fff3ec 100%);
    }
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      .size-box {
        flex-shrink: 0;
        width: 326rpx;
        height: 168rpx;
        margin-left: 10rpx;
      }
      .img {
        position: absolute;
        top: -32rpx;
        right: -32rpx;
        width: 358rpx;
        height: 200rpx;
      }
    }
    &__main {
      // margin-top: 30rpx;
      background: #fff;
      border-radius: 20rpx;
      min-height: calc(100% - 200rpx);

      &--content {
        padding: 28rpx;
        .type {
          &--title {
            background: linear-gradient(
              270deg,
              rgba(255, 128, 14, 0) 0%,
              rgba(255, 128, 14, 0.16) 100%
            );
            border-radius: 8rpx 0rpx 0rpx 8rpx;
            font-weight: 600;
            color: $uni-color-title;
            padding: 14rpx 20rpx;
            display: flex;
            align-items: center;
            gap: 12rpx;
            font-size: 30rpx;
            image {
              width: 36rpx;
              height: 36rpx;
            }
          }
          &--content {
            padding: 24rpx 20rpx;
            color: $uni-color-title;
            font-size: 26rpx;
            label {
              font-weight: 600;
            }
          }
        }
      }
    }
  }
</style>
